<template>
  <div style="padding-left: 10px" v-if="show">
    <el-form label-position="top">
      <el-form-item label="标题" v-if="data.customType!='grid' && isShowFieldName">
        <el-input v-model="data.fieldName" size="medium"></el-input>
      </el-form-item>

      <el-form-item label="最大输入长度" v-if="Object.keys(data.config).indexOf('maxLength')>=0">
        <el-input v-model="data.config.maxLength" size="medium"></el-input>
      </el-form-item>

      <el-form-item label="数值精度" v-if="data.fieldType=='number'">
        <el-input-number v-model="data.config.precision" size="medium"></el-input-number>
      </el-form-item>

      <el-form-item label="文字提示" v-if="data.type=='upload' || data.type == 'serialNum'">
        <el-input v-model="data.config.tips" size="medium"></el-input>
      </el-form-item>

      <!--子表单操作-->
      <el-form-item label="操作名称" v-if="Object.keys(data.config).indexOf('actionName')>=0">
        <el-input v-model="data.config.actionName" size="medium"></el-input>
      </el-form-item>

      <!--<el-form-item label="宽度" v-if="Object.keys(data.config).indexOf('width')>=0">
        <el-input v-model="data.config.width" size="medium"></el-input>
      </el-form-item>

      <el-form-item label="高度" v-if="Object.keys(data.config).indexOf('height')>=0">
        <el-input v-model="data.config.height" size="medium"></el-input>
      </el-form-item>-->

      <el-form-item label="大小" v-if="Object.keys(data.config).indexOf('size')>=0">
        宽度 <el-input style="width: 75px;" type="number" v-model.number="data.options.size.width"></el-input>
        高度 <el-input style="width: 75px;" type="number" v-model.number="data.options.size.height"></el-input>
      </el-form-item>

      <el-form-item label="占位内容" v-if="Object.keys(data.config).indexOf('placeholder')>=0 && (data.type!='time' || data.type!='date')">
        <el-input v-model="data.options.placeholder"></el-input>
      </el-form-item>
      <el-form-item label="显示输入框" v-if="Object.keys(data.config).indexOf('showInput')>=0">
        <el-switch v-model="data.options.showInput" ></el-switch>
      </el-form-item>

      <!--数字输入框配置-->
      <template v-if="data.type === 'number'">
        <el-form-item label="格式">
          <el-select v-model="data.options.format" style="width: 100%;" @change="changeNumFormat">
            <el-option label="数值" value="num"></el-option>
            <el-option label="百分比" value="percent"></el-option>
          </el-select>
          <div class="digitsSet">
            <el-checkbox style="margin-right: 10px" v-model="data.options.isStayDigits">保留小数位数</el-checkbox>
            <el-input-number v-model="data.options.digitsNum" style="width: 109px; height: 27px; line-height: 27px" @change="changeDigitsNum" :min="0"></el-input-number>
          </div>
          <div v-if="data.options.format == 'num'"><el-checkbox v-model="data.options.isShowThousandsSeparator" @change="changeDigitsNum">显示千分符</el-checkbox></div>
          <div class="num-preview" v-show="data.options.isStayDigits || data.options.isShowThousandsSeparator">{{previewNum}}</div>
        </el-form-item>
      </template>

      <el-form-item label="是否支持多选" v-if="data.fieldType=='select'">
        <el-switch v-model="data.config.multiple" @change="handleSelectMuliple"></el-switch>
      </el-form-item>
      <el-form-item label="是否可搜索" v-if="data.type=='select'">
        <el-switch v-model="data.options.filterable"></el-switch>
      </el-form-item>
      <el-form-item label="允许半选" v-if="Object.keys(data.config).indexOf('allowHalf')>=0">
        <el-switch
            v-model="data.options.allowHalf">
        </el-switch>
      </el-form-item>
      <el-form-item label="支持透明度选择" v-if="Object.keys(data.config).indexOf('showAlpha')>=0">
        <el-switch
            v-model="data.options.showAlpha">
        </el-switch>
      </el-form-item>
      <el-form-item label="是否显示标签" v-if="Object.keys(data.config).indexOf('showLabel')>=0">
        <el-switch
            v-model="data.options.showLabel">
        </el-switch>
      </el-form-item>
      <el-form-item label="选项" v-if="Object.keys(data.config).indexOf('options')>=0">
        <el-radio-group v-model="data.options.remote" size="mini"  class="setDataSourceBox" style="margin-bottom:10px; white-space: nowrap">
          <el-radio-button label="staticData">静态数据</el-radio-button>
          <el-radio-button label="remoteDataSel">选择数据</el-radio-button>
        </el-radio-group>
        <template v-if="data.options.remote=='remoteDataSel'">
          <el-select v-model="data.options.remoteSelData" placeholder="请选择">
            <el-option
              v-for="item in remoteDataList"
              :value-key="item.value"
              :label="item.label"
              :value="item">
            </el-option>
          </el-select>
        </template>
        <template v-else>
          <template v-if="data.type=='radio' || (data.type=='select'&&!data.options.multiple)">
            <el-radio-group v-model="data.options.defaultValue">
              <draggable tag="ul" :list="data.options.options"
                v-bind="{group:{ name:'options'}, ghostClass: 'ghost',handle: '.drag-item'}"
                handle=".drag-item"
              >
                <li v-for="(item, index) in data.options.options" :key="index">
                  <el-radio
                    :label="item.value"
                    style="margin-right: 5px;">
                    <el-input :style="{'width': data.options.showLabel? '90px': '180px' }" size="mini" v-model="item.value"></el-input>
                    <el-input style="width:90px;" size="mini" v-if="data.options.showLabel" v-model="item.label"></el-input>
                    <!-- <input v-model="item.value"/> -->
                  </el-radio>
                  <i class="drag-item" style="font-size: 16px;margin: 0 5px;cursor: move;"><i class="iconfont icon-icon_bars"></i></i>
                  <el-button @click="handleOptionsRemove(index)" circle plain type="danger" size="mini" icon="el-icon-minus" style="padding: 4px;margin-left: 5px;"></el-button>

                </li>
              </draggable>

            </el-radio-group>
          </template>

          <template v-if="data.type=='checkbox' || (data.type=='select' && data.options.multiple)">
            <el-checkbox-group v-model="data.options.defaultValue">

              <draggable tag="ul" :list="data.options.options"
                v-bind="{group:{ name:'options'}, ghostClass: 'ghost',handle: '.drag-item'}"
                handle=".drag-item">
                <li v-for="(item, index) in data.options.options" :key="index">
                  <el-checkbox
                    :label="item.value"
                    style="margin-right: 5px;">
                    <el-input :style="{'width': data.options.showLabel? '90px': '180px' }" size="mini" v-model="item.value"></el-input>
                    <el-input style="width:90px;" size="mini" v-if="data.options.showLabel" v-model="item.label"></el-input>
                  </el-checkbox>
                  <i class="drag-item" style="font-size: 16px;margin: 0 5px;cursor: move;"><i class="iconfont icon-icon_bars"></i></i>
                  <el-button @click="handleOptionsRemove(index)" circle plain type="danger" size="mini" icon="el-icon-minus" style="padding: 4px;margin-left: 5px;"></el-button>
                </li>
              </draggable>
            </el-checkbox-group>
          </template>
          <div style="margin-left: 22px;" v-show="data.options.remote === 'staticData'">
            <el-button type="text" @click="handleAddOption">添加选项</el-button>
            <el-button type="text" v-if="data.type == 'radio' || data.type=='select'" @click="showOptionRelated">
              选项关联
              <span style="color: mediumpurple" v-show="this.data.options.isRealed">(已设置)</span>
            </el-button>
          </div>
        </template>

      </el-form-item>

      <el-form-item label="单位" v-if="data.type == 'number'">
        <el-input v-model="data.options.unit"></el-input>
      </el-form-item>

      <el-form-item label="默认值" v-if="Object.keys(data.config).indexOf('defaultValue')>=0 && (data.type == 'number' || data.type == 'textarea' || data.type == 'input' || data.type=='rate' || data.type=='color' || data.type=='switch' || data.type=='text')">
        <input v-if="data.type=='number'"
               v-model="data.options.defaultValue"
               @focus="initNumber('defaultValue')"
               @blur="reSetNumberVal('defaultValue')"
               @input="setNumberValue($event, 'defaultValue')"
               style="height: 36px"
               class="el-input__inner"></input>
        <el-input v-if="data.type=='textarea'" type="textarea" :rows="5" v-model="data.options.defaultValue"></el-input>
        <el-input v-if="data.type=='input' || data.type=='text'" v-model="data.options.defaultValue"></el-input>
        <el-rate v-if="data.type == 'rate'" style="display:inline-block;vertical-align: middle;" :max="data.options.max" :allow-half="data.options.allowHalf" v-model="data.options.defaultValue"></el-rate>
        <el-button type="text" v-if="data.type == 'rate'" style="display:inline-block;vertical-align: middle;margin-left: 10px;" @click="data.options.defaultValue=0">清空</el-button>
        <el-color-picker
          v-if="data.type == 'color'"
          v-model="data.config.defaultValue"
          :show-alpha="data.config.showAlpha"
        ></el-color-picker>
        <el-switch v-if="data.type=='switch'" v-model="data.options.defaultValue"></el-switch>
      </el-form-item>

      <template v-if="data.type == 'time' || data.type == 'date'">
        <el-form-item label="显示类型" v-if="data.type == 'date'">
          <el-select v-model="data.config.type">
            <el-option value="year"></el-option>
            <el-option value="month"></el-option>
            <el-option value="date"></el-option>
            <el-option value="dates"></el-option>
            <!-- <el-option value="week"></el-option> -->
            <el-option value="datetime"></el-option>
            <el-option value="datetimerange"></el-option>
            <el-option value="daterange"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否为范围选择" v-if="data.type == 'time'">
          <el-switch
            v-model="data.config.isRange"
          >
          </el-switch>
        </el-form-item>
        <el-form-item label="是否获取时间戳" v-if="data.type == 'date'">
          <el-switch
            v-model="data.config.timestamp"
          >
          </el-switch>
        </el-form-item>
        <el-form-item label="占位内容" v-if="(!data.config.isRange && data.type == 'time') || (data.type != 'time' && data.config.type != 'datetimerange' && data.config.type != 'daterange')">
          <el-input v-model="data.config.placeholder"></el-input>
        </el-form-item>
        <el-form-item label="开始时间占位内容" v-if="(data.config.isRange) || data.config.type=='datetimerange' || data.config.type=='daterange'">
          <el-input v-model="data.config.startPlaceholder"></el-input>
        </el-form-item>
        <el-form-item label="结束时间占位内容" v-if="data.options.isRange || data.config.type=='datetimerange' || data.config.type=='daterange'">
          <el-input v-model="data.config.endPlaceholder"></el-input>
        </el-form-item>
        <el-form-item label="格式">
          <el-input v-model="data.config.format"></el-input>
        </el-form-item>
        <el-form-item label="默认值" v-if="data.type=='time' && Object.keys(data.config).indexOf('isRange')>=0">
          <el-time-picker
            key="1"
            style="width: 100%;"
            v-if="!data.config.isRange"
            v-model="data.config.defaultValue"
            :arrowControl="data.config.arrowControl"
            :value-format="data.config.format"
          >
          </el-time-picker>
          <el-time-picker
            key="2"
            v-if="data.config.isRange"
            style="width: 100%;"
            v-model="data.config.defaultValue"
            is-range
            :arrowControl="data.config.arrowControl"
            :value-format="data.config.format"
          >
          </el-time-picker>
        </el-form-item>
      </template>

      <template v-if="data.type != 'grid' && data.type != 'childForm' && data.type != 'serialNum'">
        <!--<el-form-item label="操作属性">
          <el-checkbox v-model="data.options.readonly" v-if="Object.keys(data.options).indexOf('readonly')>=0">完全只读</el-checkbox>
          <el-checkbox v-model="data.options.disabled" v-if="Object.keys(data.options).indexOf('disabled')>=0">禁用</el-checkbox>
          <el-checkbox v-model="data.options.editable" v-if="Object.keys(data.options).indexOf('editable')>=0">文本框可输入</el-checkbox>
          <el-checkbox v-model="data.options.clearable" v-if="Object.keys(data.options).indexOf('clearable')>=0">显示清除按钮</el-checkbox>
          <el-checkbox v-model="data.options.arrowControl" v-if="Object.keys(data.options).indexOf('arrowControl')>=0">使用箭头进行时间选择</el-checkbox>
          <el-checkbox v-model="data.options.isDelete" v-if="Object.keys(data.options).indexOf('isDelete')>=0">删除</el-checkbox>
          <el-checkbox v-model="data.config.isEdit" v-if="Object.keys(data.config).indexOf('isEdit')>=0">编辑</el-checkbox>
        </el-form-item>-->
        <el-form-item label="校验">
          <div>
            <el-checkbox v-model="data.config.required">是否必填</el-checkbox>
          </div>
          <el-select v-if="Object.keys(data.config).indexOf('dataType')>=0" v-model="data.config.dataType" size="mini" >
            <el-option value="string" label="字符串"></el-option>
            <el-option value="number" label="数字"></el-option>
            <el-option value="boolean" label="布尔值"></el-option>
            <el-option value="integer" label="整数"></el-option>
            <el-option value="float" label="浮点数"></el-option>
            <el-option value="url" label="URL地址"></el-option>
            <el-option value="email" label="邮箱地址"></el-option>
            <el-option value="phone" label="电话号码"></el-option>
          </el-select>

          <div v-if="data.type === 'number'">
            <el-checkbox v-model="data.config.limitedRange">限定数值范围</el-checkbox>
            <div class="limitInputBox" v-if="data.config.limitedRange" style="display: flex; align-items: center">
              <input type="text"
                     v-model="data.config.min"
                     @focus="initNumber('min')"
                     @blur="reSetNumberVal('min')"
                     @input="setNumberValue($event, 'min')" placeholder="不限">
              ~
              <input type="text"
                     v-model="data.config.max"
                     @focus="initNumber('max')"
                     @blur="reSetNumberVal('max')"
                     @input="setNumberValue($event, 'max')" placeholder="不限">
            </div>
          </div>

          <!--<div v-if="Object.keys(data.config).indexOf('pattern')>=0">
            <el-input size="mini" v-model.lazy="data.config.pattern"  style=" width: 240px;" placeholder="填写正则表达式"></el-input>
          </div>-->
        </el-form-item>
      </template>

      <!--流水号规则-->
      <template v-if="data.type == 'serialNum'">
        <el-form-item class="serialNumRule" label="流水号规则">
          <draggable tag="ul" class="rule-list" :list="data.config.rules"
                     v-bind="{group:'serialNumRule', ghostClass: 'ghost',handle: '.drag-item'}"
                     handle=".drag-item">
            <li class="rule-item" :key="index" v-for="(item,index) in data.config.rules">
              <div class="rule-content rule-editable" v-if="item.type==1" @click="showCountNumConfDia(item, index)">
                <i class="el-icon-edit icon-edit"></i>
                <div class="rule-label">自动计数</div>
                <div class="rule-value"> <span>{{item.countDigit}}位数字，{{item.resetCycleStr}}</span></div>
              </div>
              <div class="rule-content" v-if="item.type==2">
                <div class="rule-label">固定字符</div>
                <div class="rule-input" style="height: 28px;">
                  <input type="text" placeholder="请输入内容" v-model="item.fixedStr">
                </div>
              </div>
              <div class="rule-content rule-editable" v-if="item.type==3" @click="showDateFormatConfDia(item, index)">
                <i class="el-icon-edit icon-edit"></i>
                <div class="rule-label">提交日期</div>
                <div class="rule-value"> <span>格式：{{item.format}}</span></div>
              </div>
              <i class="drag-item" style="font-size: 16px;margin: 0 5px;cursor: move;"><i class="el-icon-sort" style="cursor: move"></i></i>
              <i class="el-icon-empty icon-trasho" v-if="item.type==1"></i>
              <i class="el-icon-delete icon-trasho" v-else></i>
            </li>
            <!--<li class="rule-item">
               <div class="rule-content">
                 <div class="rule-label">固定字符</div>
                 <div class="rule-input" style="height: 28px;">
                   <input type="text" placeholder="请输入内容">
                 </div>
               </div>
               <i class="el-icon-delete icon-trasho"></i>
             </li>-->
          </draggable>
          <div>
            <el-popover
              ref="popoverAddRule"
              placement="bottom-start"
              width="160"
              v-model="isShowPopoverAddRule">
              <p style="cursor: pointer;" @click="addSerialRule(item)" v-for="(item, index) in serialRuleTypes" :key="index">{{item.describe}}</p>
            </el-popover>
            <el-button type="text" icon="el-icon-plus" v-popover:popoverAddRule>添加</el-button>
          </div>
        </el-form-item>
      </template>

    </el-form>

    <!--选项关联弹框-->
    <optionRelated v-if="isShowOptionRelated" :data="data" :components="componentList" @close="closeOptionRelated" @submit="submitOptionRelated"></optionRelated>

    <!--流水号计数设置弹框-->
    <countNumConfDia v-if="isShowCountNumConfDia" :data="curSerialNumRule" @close="closeCountNumConfDia" @submit="submitCountNumConf"></countNumConfDia>

    <!--日期格式配置弹框-->
    <dateFormatConfDia :data="curSerialNumRule" :isDialogBookShow.sync="isDialogBookShow" @submit="submitDateFormatConf"></dateFormatConfDia>
  </div>
</template>

<script>
import Draggable from 'vuedraggable'
import optionRelated from '@/components/rfFormMake/components/optionRelated'
import countNumConfDia from '@/components/rfFormMake/components/countNumConfDia'
import dateFormatConfDia from '@/components/rfFormMake/components/dateFormatConfDia'
import util from '@/utils/util'

export default {
  components: {
    Draggable,
    optionRelated,
    countNumConfDia,
    dateFormatConfDia
  },
  props: {
    'data': {
      type: Object,
      default: () => ({})
    },
    'componentList': {
      type: Array,
      default: () => ([])
    },
    'remoteDataList': {
      type: Array,
      default: () => ([])
    },
    isShowFieldName: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      validator: {
        type: null,
        required: null,
        pattern: null,
        range: null,
        length: null,
        limitRange: null
      },
      curSerialNumRuleIndex: 0,
      curSerialNumRule: {},
      serialRuleTypes: [
        {type: 2, describe: '固定字符'},
        {type: 3, describe: '提交日期'}
      ],
      isShowOptionRelated: false,
      isShowCountNumConfDia: false,
      isDialogBookShow: false,
      isShowPopoverAddRule: false,
      previewNum: '99999'
    }
  },
  computed: {
    show () {
      if (this.data && Object.keys(this.data).length > 0) {
        return true
      }
      return false
    }
  },
  methods: {
    handleOptionsRemove (index) {
      if (this.data.type === 'grid') {
        this.data.columns.splice(index, 1)
      } else {
        this.data.options.options.splice(index, 1)
      }
    },
    handleAddOption () {
      if (this.data.config.showLabel) {
        this.data.config.options.push({
          value: '新选项',
          label: '新选项'
        })
      } else {
        this.data.config.options.push({
          value: '新选项'
        })
      }
    },
    handleAddColumn () {
      this.data.columns.push({
        span: '',
        list: []
      })
    },
    generateRule () {
      this.data.rules = []
      Object.keys(this.validator).forEach(key => {
        if (this.validator[key]) {
          this.data.rules.push(this.validator[key])
        }
      })
    },
    handleSelectMuliple (value) {
      if (value) {
        if (this.data.config.defaultValue) {
          this.data.config.defaultValue = [this.data.config.defaultValue]
        } else {
          this.data.config.defaultValue = []
        }
      } else {
        if (this.data.config.defaultValue.length>0){
          this.data.config.defaultValue = this.data.config.defaultValue[0]
        } else {
          this.data.config.defaultValue = ''
        }
      }
    },

    validateRequired (val) {
      if (val) {
        this.validator.required = {required: true, message: `${this.data.name}必须填写}`}
      } else {
        this.validator.required = null
      }

      this.$nextTick(() => {
        this.generateRule()
      })
    },

    validateDataType (val) {
      if (!this.show) {
        return false
      }

      if (val) {
        this.validator.type = {type: val, message: this.data.name + '格式不正确'}
      } else {
        this.validator.type = null
      }

      this.generateRule()
    },
    valiatePattern (val) {
      if (!this.show) {
        return false
      }

      if (val) {
        this.validator.pattern = {pattern: val, message: this.data.name + '格式不匹配'}
      } else {
        this.validator.pattern = null
      }

      this.generateRule()
    },
    // 数字范围验证
    validateNumberRange () {
      if (this.data.type !== 'number') return
      let {min, max, limitedRange} = this.data.config
      max = max.replace(/\,/g,"")
      min = min.replace(/\,/g,"")
      let checkRange = (rule, value, callback) => {
        value = value.replace(/,/g, '')
        if (min === '' && value > max) {
          callback(new Error(`请输入小于等于${max}的数字`))
        } else if (max === '' && value < min) {
          callback(new Error(`请输入大于等于${min}的数字`))
        } else if ((value < min || value > max) && (min !=='' && max !== '')) {
          callback(new Error(`请输入${min}至${max}范围内的数字`))
        } else {
          callback()
        }
      }
      if (limitedRange) {
        this.validator.limitRange = {
          validator: checkRange,
          trigger: 'blur'
        }
      } else {
        this.validator.limitRange = null
      }
      this.generateRule()
    },
    showOptionRelated () {
      this.isShowOptionRelated = true
    },
    // 提交关联
    submitOptionRelated () {
      this.data.config.isRealed = false // 用来判断选项是否已关联
      for (let i = 0; i < this.data.config.options.length; i++) {
        if (this.data.config.options[i].relatedComponents.length > 0) {
          this.data.config.isRealed = true
          return
        }
      }
    },
    // 关闭关联选项弹框
    closeOptionRelated () {
      this.isShowOptionRelated = false
    },
    showCountNumConfDia (item, index) {
      this.curSerialNumRuleIndex = index
      this.curSerialNumRule = JSON.parse(JSON.stringify(item))
      this.isShowCountNumConfDia = true
    },
    // 确定流水计数设置
    submitCountNumConf (data) {
      Object.assign(this.data.config.rules[this.curSerialNumRuleIndex], data)
    },
    // 确定流水号日期格式设置
    submitDateFormatConf (data) {
      Object.assign(this.data.config.rules[this.curSerialNumRuleIndex], data)
    },
    // 关闭计数设置弹框
    closeCountNumConfDia () {
      this.isShowCountNumConfDia = false
    },
    showDateFormatConfDia (item, index) {
      this.curSerialNumRuleIndex = index
      this.curSerialNumRule = JSON.parse(JSON.stringify(item))
      this.isDialogBookShow = true
    },
    // 添加流水规则
    addSerialRule (item) {
      let obj = {}
      switch (item.type) {
        case 2:
          obj = {
            type: 2,
            fixedStr: ''
          }
          this.data.config.rules.push(obj)
          break
        case 3:
          obj = {
            type: 3,
            format: 'yyyy-mm-dd'
          }
          this.data.config.rules.push(obj)
          break
      }
      this.isShowPopoverAddRule = false
    },
    // 改变数字格式
    changeNumFormat () {
      this.data.config.digitsNum = 0
      this.data.config.isStayDigits = false
      this.data.config.isShowThousandsSeparator = false
      this.data.config.defaultValue = ''
      this.data.config.limitedRange = false
      this.data.config.min = ''
      this.data.config.max = ''
      this.previewNum = '99999'
    },
    // 改变数字框的小数位数
    changeDigitsNum (value) {
      this.previewNum = '99999'
      let num = this.data.config.digitsNum
      let re = new RegExp("\\d+(\\.\\d{0," + 2 + "})?")
      num = parseInt(num) + 1
      if (num > 1) {
        this.previewNum = this.previewNum.split('.')[0] + '.' + Array(num).join(0)
      } else {
        this.previewNum = '99999'
      }
      if (this.data.config.isShowThousandsSeparator) {
        this.previewNum = util.forMatThousands(this.previewNum)
      }
      if (this.data.config.format === 'percent') {
        this.previewNum += '%'
      }
    },

    setNumberValue (event, key) {
      let value = event.target.value
      let re = new RegExp("\\d+(\\.\\d{0," + this.data.options.digitsNum + "})?")
      value = value.match(re) ? value.match(re)[0] : ''
      if (this.data.config.format === 'percent') {
        this.data.config[key] = value + '%'
        this.changeCursorPos(event.target)
      } else {
        this.data.config[key] = value
      }
    },
    changeCursorPos (target) {
      if (target.value.indexOf('%') != -1) {
        if (target.setSelectionRange) {
          setTimeout(() => {
            target.setSelectionRange(target.value.length - 1, target.value.length - 1)
          })
        } else {
          console.log('不兼容该方法')
        }
      }
    },
    // 数字框失去焦点显示设定的格式
    reSetNumberVal (key) {
      let num = this.data.config.digitsNum
      num = parseInt(num) + 1
      if (num > 1) {
        let arr = (this.data.options[key] + '').split('.')
        arr[1] = arr[1] || ''
        this.data.config[key] = arr[0] + '.' + arr[1] + Array(num - arr[1].length).join(0)
      }
      if (this.data.config.isShowThousandsSeparator) {
        this.data.config[key] = util.forMatThousands(this.data.options[key])
      }
    },
    initNumber (key) {
      let reg = new RegExp(",","g") //"g"表示全局替换
      this.data.config[key] = this.data.config[key].replace(reg, '')
    },
    setNumber (event) {
      event.target.focus()
    }
  },
  watch: {
    'data.config.isRange': function(val) {
      if (typeof val !== 'undefined') {
        if (val) {
          this.data.options.defaultValue = null
        } else {
          if (Object.keys(this.data.options).indexOf('defaultValue')>=0)
            this.data.options.defaultValue = ''
        }
      }
    },
    'data.config.required': function(val) {
      this.validateRequired(val)
    },
    'data.config.dataType': function (val) {
      this.validateDataType(val)
    },
    'data.config.pattern': function (val) {
      this.valiatePattern(val)
    },
    'data.config.min': function () {
      this.validateNumberRange()
    },
    'data.config.max': function () {
      this.validateNumberRange()
    },
    'data.config.limitedRange': function () {
      this.validateNumberRange()
    },
    'data.name': function (val) {
      if (this.data.config) {
        this.validateRequired(this.data.config.required)
        this.validateDataType(this.data.config.dataType)
        this.valiatePattern(this.data.config.pattern)
        this.validateNumberRange()
      }
    }
  }
}
</script>

<style>
  .digitsSet {
    margin-top: 10px;
  }
  .digitsSet .el-input--medium .el-input__inner {
    height: 29px;
    line-height: 29px;
  }
  .num-preview {
    height: 70px;
    position: relative;
    background: #F4F5F5;
    border-radius: 3px;
    margin-top: 8px;
    line-height: 70px;
    font-size: 20px;
    text-align: center;
    font-weight: 500;
    color: #333;
  }
  .limitInputBox input{
    width: 100px;
    height: 34px;
    outline: none;
  }
  .config-content .el-form-item {
    margin-bottom: 10px;
  }

  .serialNumRule .rule-item {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
    line-height: 30px;
    margin-bottom: 5px;
  }
  .serialNumRule .rule-item .rule-content.rule-editable {
    cursor: pointer;
  }
  .serialNumRule .rule-item .rule-content {
    position: relative;
    flex: 1 1 auto;
    border-radius: 2px;
    overflow: hidden;
    border: 1px solid #DDD;
    height: 30px;
    line-height: 28px;
    padding-left: 8px;
  }
  .serialNumRule .rule-item .rule-content .icon-edit {
    font-size: 17px;
    cursor: pointer;
    color: #409eff;
    position: relative;
    float: right;
    right: 0;
    padding: 0 5px;
    margin: 5px 5px 0 0;
    display: none;
  }
  .serialNumRule .rule-item .rule-content:hover .icon-edit {
    display: block;
  }
  .rule-item .rule-content:hover .rule-input>input {
    background: #EBEBEB;
  }
  .rule-item .rule-label {
    color: #409eff;
    position: absolute;
    top: 0;
    left: 8px;
    bottom: 0;
    width: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .rule-item .rule-value {
    margin-left: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .rule-item .rule-input {
    position: absolute;
    top: 0;
    left: 70px;
    right: 0;
    line-height: 0;
    padding: 1px 0;
  }
  .rule-item .rule-input>input {
    border: none;
    height: 100%;
  }
  .rule-item .rule-input>input:focus{
    outline: none;
  }
  .requestParams .requestItem .el-input {
    width: 99px;
  }
  .setDataSourceBox .el-radio-button--mini .el-radio-button__inner {
    padding: 7px 10px;
  }
</style>
